<template>
    <div class="edit-plan-view">

      <div>
        <item-title title="基本信息"></item-title>

        <el-form ref="ruleForm" :inline="true" :model="data" :rules="rules" class="demo-form-inline" label-width="170px" size="medium" label-position="right">
          <el-form-item label="任务名称" prop="task_name">
            <el-input v-model="data.task_name" placeholder="请输入任务名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="父任务" v-if="data.level != 1">
            <el-select v-model="data.parent_id" placeholder="请选择父任务" @change="planChange">
              <el-option
                v-for="item in planList"
                :key="item.id"
                :label="item.task_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="前置任务" v-if="data.level != 1">
            <el-select v-model="data.foreground_task_id" placeholder="请选择前置任务" clearable @change="preChange">
              <el-option
                v-for="item in planList2"
                :key="item.id"
                :label="item.task_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="父任务开始几天后开始" v-if="data.foreground_task_id == ''">
            <el-input v-model="data.start_after_days" placeholder="请输入开始天数" @keyup.native="startProving"></el-input>
          </el-form-item>

          <el-form-item label="前置任务结束几天后开始" v-else>
            <el-input v-model="data.start_after_days" placeholder="请输入开始天数" @keyup.native="startProving"></el-input>
          </el-form-item>

          <el-form-item label="工期（天）" prop="duration">
            <el-input v-model="data.duration" placeholder="请输入工期" @keyup.native="durationProving"></el-input>
          </el-form-item>
          <el-form-item label="阶段性评审" prop="delivery">
            <el-switch v-model="data.periodical_review"></el-switch>
          </el-form-item>
          <el-form-item label="强制验收" prop="delivery">
            <el-switch v-model="data.mandatory_check"></el-switch>
          </el-form-item>

        </el-form>
      </div>


      <div class="document-view">

<!--        <div class="top">-->

<!--          <p class="title">交付文档</p>-->

<!--          <div class="btn-view">-->

<!--            <a class="add" @click="addClick">添加文档</a>-->

<!--            <a class="dlt" @click="allDelete" v-if="data.files.length">全部删除</a>-->

<!--          </div>-->

<!--        </div>-->


        <item-title title="交付文档">
          <template slot="btn">
            <div class="top">
              <div class="btn-view">

                <el-button size="medium" type="text" icon="el-icon-edit" @click="addClick">
                  添加文档
                </el-button>

                <el-button v-if="data.files.length" size="medium" type="text" icon="el-icon-delete" class="text-btn-red" @click="allDelete">
                  全部删除
                </el-button>

              </div>
            </div>

          </template>
        </item-title>

        <el-table
          size="medium"
          :data="data.files"
          align="center"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            prop="file_name"
            label="文档名称"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="type_name"
            label="文档类型"
            width="100">
          </el-table-column>
          <el-table-column
            align="center"
            label="申报所需文件"
            width="150">
            <template slot-scope="scope">
              <span>{{scope.row.need?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="操作"
            >
            <template slot-scope="scope">

              <el-button size="medium" type="text" icon="el-icon-edit" @click="editClick(scope.row,scope.$index)">
                编辑
              </el-button>
              <el-button class="text-btn-red" size="medium" type="text" icon="el-icon-delete" @click="deleteClick(scope.$index)">
                删除
              </el-button>
            </template>

          </el-table-column>
        </el-table>

      </div>


      <el-dialog
        class="documentDialog"
        v-if="dialogVisible"
        title="文档"
        :visible.sync="dialogVisible"
        width="500px"
        append-to-body
        :before-close="handleClose">

        <el-form ref="documentForm" :rules="rules" :model="documentData" class="demo-form-inline" label-width="100px" size="medium" label-position="left">
          <el-form-item label="文档名称" prop="file_name">
            <el-input v-model="documentData.file_name"></el-input>
          </el-form-item>
          <el-form-item label="文档类型" prop="file_type">
            <el-select v-model="documentData.file_type" @change="typeChange" style="width: 100%">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.dict_val"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报所需文件" prop="delivery">
            <el-switch v-model="documentData.need"></el-switch>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="documentConfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "editPlanView",
        props:{
            data:Object,
            documents:Object,
            plans:Array,
        },
        data: function() {
            return {
                tableData:[],
                dialogVisible:false,
                documentData:{},
                documentIndex:-1,
                planList:[],
                planList2:[],
                ids:[],
                options: [],
                rules: {
                    task_name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    duration: [
                        { required: true, message: '请输入工期', trigger: 'blur' }
                    ],
                    file_name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    file_type: [
                        { required: true, message: '请选择文档类型', trigger: 'change' }
                    ],
                },
            }
        },
        mounted:function(){
            this.options = this.$store.getters.sysDic('file_type')
        },
        methods:{
            validateFun:function(){
                return new Promise(((resolve, reject) => {
                    this.$refs.ruleForm.validate((valid) => {
                        if (valid){
                            resolve()
                        }else {
                            reject()
                        }
                    });
                }))

            },
            dealPlanList:function(list = null){
                this.planList = [];
                this.plans.forEach(item=>{

                    if (item.id != this.data.id && item.level != 5){
                        this.planList.push(item);
                    }
                })

                this.ids = [];
                if (list){
                    this.ids = this.ids.concat(list)
                }

                if (this.data.children && this.data.children.length > 0){
                    this.aaa(this.data.children);
                }

                this.planList2 = [];
                this.plans.forEach(item=>{
                    let index = this.ids.findIndex(a=>a == item.id)
                    if (item.id != this.data.id && index == -1){
                        this.planList2.push(item);
                    }
                })
            },
            aaa:function(list){
                for (let i = 0; i < list.length; i++){
                    if (list[i].children && list[i].children.length > 0){
                        this.aaa(list[i].children);
                    }
                    this.ids.push(list[i].id);
                }
            },
            allDelete:function(){
                this.data.files = [];
            },
            handleClose:function () {
                this.dialogVisible = false;
            },
            addClick:function () {
                this.dialogVisible = true;
                this.documentData = {
                    id:0,
                    file_name:'',
                    file_type:'',
                    type_name:'',
                    need:false,
                }
                this.documentIndex = -1;
            },
            documentConfirm:function () {
                this.$refs.documentForm.validate((valid) => {

                    if (valid){
                        let data = {...this.documentData};

                        if (this.documentIndex < 0){
                            data.id = this.documents.id + "";
                            this.documents.id ++;
                            this.data.files.push(data)
                        }else {
                            this.$set(this.data.files,this.documentIndex,data);
                        }
                        this.dialogVisible = false;
                    }
                });
            },
            editClick:function (item,index) {
                this.documentData = {...item}
                this.documentIndex = index;
                this.dialogVisible = true;
            },
            deleteClick:function (index) {
                this.data.files.splice(index,1)
            },
            planChange:function (id) {
                let index = this.planList.findIndex(a=>a.id == id)
                if (index != -1){
                    let plan = this.planList[index]
                    this.data.parent_id = plan.id + "";
                    this.data.parent_name = plan.task_name;
                    this.data.level = plan.level + 1

                    this.data.foreground_task_id = "";
                    this.data.foreground_task_name = "";

                    let list = this.getParent(this.data)

                    this.planList2 = [];
                    this.plans.forEach(item=>{
                        let index = list.findIndex(a=>a == item.id)
                        if (item.id != this.data.id && index == -1){
                            this.planList2.push(item);
                        }
                    })
                }

            },
            getParent:function(data){
                let list = []
                if (data.parent_id){
                    let index = this.planList.findIndex(a=>a.id == data.parent_id)
                    if (index != -1){
                        let plan = this.planList[index]
                        list.push(plan.id)
                        list = list.concat(this.getParent(plan))
                    }
                }
                return list;
            },
            preChange:function (id) {
                console.log(id)
                if (id){
                    let index = this.planList2.findIndex(a=>a.id == id)
                    if (index != -1){
                        let plan = this.planList2[index]
                        this.data.foreground_task_id = plan.id + "";
                        this.data.foreground_task_name = plan.task_name;
                    }
                }else {
                    this.data.foreground_task_id = "";
                    this.data.foreground_task_name = "";
                }

            },
            durationProving:function(val) {
                let str = this.data.duration
                // this.form.skus[e].Price 是input的值　　
                // 先把非数字的都替换掉，除了数字和.
                if (str){
                    str = str.replace(/[^\d]/g, '');
                }

                this.data.duration = Number(str);

            },
            startProving:function(val) {
                let str = this.data.start_after_days
                // this.form.skus[e].Price 是input的值　　
                // 先把非数字的都替换掉，除了数字和.
                str = str.replace(/[^\d]/g, '');

                this.data.start_after_days = Number(str);

            },
            typeChange:function (id) {
                let index = this.options.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.options[index];
                    this.documentData.file_type = data.id
                    this.documentData.type_name = data.dict_val
                }

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../../assets/scss/views/setting/model/editPlanView.scss";

  .edit-plan-view{
    .el-form-item{
      .el-form-item__content{
        width: 200px;
        .el-input{
          width: 200px;
        }
      }
      margin-right: 50px;

    }
  }

</style>
